<template>
  <view class="index">
    <view class="padding">
      <van-search
        :value="keywordValue"
        placeholder="搜索品牌/车型/车系等"
        @search="onSearch"
        @change="onChange"
      />
    </view>
    <Empty title="没有搜到相关内容" v-if="!loading && data.length === 0" />
    <block v-else>
      <List :data="data" />
      <view class="loading-more" v-if="finished">
        已全部加载完毕
      </view>
      <view class="loading-more" v-if="loading">
        正在加载...
      </view>
    </block>
  </view>
</template>

<script>
import List from '@components/self/index/list'
import { getSelfList } from '@requests/car'
import Taro from '@tarojs/taro'
import Empty from '@components/common/empty'
export default {
  name: 'SelfCars',
  data() {
    return {
      keywordValue: '',
      data: [],
      loading: false,
      finished: false,
      keyword: '',
      page: 1
    }
  },
  components: {
    List,
    Empty
  },
  computed: {},
  created() {
    this.getSelfCarList({ page: 1 })
  },
  onShareAppMessage() {
    return {
      title: '亿车商优质车源，低价优选'
    }
  },
  methods: {
    onChange(e) {
      this.keywordValue = e.detail
    },
    onSearch() {
      this.finished = false
      this.keyword = this.keywordValue
      this.getSelfCarList(
        {
          page: 1,
          keyword: this.keyword
        },
        false
      )
    },
    //获取自营车源列表
    getSelfCarList(data, stop = false) {
      if (this.loading || this.finished) {
        return
      }
      this.loading = true
      setTimeout(() => {
        getSelfList(data).then(res => {
          this.loading = false
          const { list } = res.result
          if (list.length === 0) {
            this.finished = true
          }
          this.page = data.page
          this.data =
            data.page === 1
              ? res.result.list
              : [...this.data, ...res.result.list]
          if (stop) {
            Taro.stopPullDownRefresh()
          }
        })
      }, 0)
    }
  },
  onPullDownRefresh() {
    this.finished = false
    this.getSelfCarList({ page: 1, keyword: this.keyword }, true)
  },
  onReachBottom() {
    this.getSelfCarList({ page: this.page + 1, keyword: this.keyword }, false)
  }
}
</script>

<style>
.main {
  padding: 0 24rpx 24rpx;
}
.index-title {
  display: block;
  font-size: 1.02rem;
  font-weight: bold;
}
.loading-more {
  text-align: center;
  font-size: 24rpx;
  padding: 0 0 24rpx;
}
</style>
